<template>
  <dw-page-warpper v-loading="loading" element-loading-text="页面加载中...">
    <el-tabs v-model="activeName" class="paramter-tabs">
      <el-tab-pane v-for="(item, index) in paramterCategoryList" :key="index" :label="item.categoryName" :name="item.categoryCode">
        <div style="width: 100%; height: 100%">
          <sys-parameter-form :categoryCode="item.categoryCode"></sys-parameter-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </dw-page-warpper>
</template>
<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';

import { getParameterCategoryList } from '@/api/sys/paramter';
import SysParameterForm from '@/views/sys/parameter/components/form.vue';

defineOptions({
  name: 'SysParameter',
});
const loading = ref<boolean>(false);
const activeName = ref<string>();
const paramterCategoryList = ref<Record<string, string>[]>([]);
onMounted(() => {
  loading.value = true;
  getParameterCategoryList().then((res) => {
    const { data } = res;
    paramterCategoryList.value = data as unknown as [];
    activeName.value = paramterCategoryList.value[0].categoryCode;
    loading.value = false;
  });
});

watch(
  () => activeName.value,
  (newValue) => {
    console.log(newValue);
  },
);
</script>
<style lang="scss" scoped>
.paramter-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  height: 100%;
}
.paramter-tabs :deep(.el-tabs__nav) {
  padding: 0 20px;
}
.paramter-tabs :deep(.el-form-item) {
  margin: 8px 0px;
}
.remove {
  cursor: pointer;
  color: var(--el-color-primary);
  font-weight: bold;
  font-size: 18px;
}
.remove:hover {
  cursor: pointer;
  color: red;
}
</style>
